<template>
	<view>
		<view style="height: 84rpx;width: 100%;padding-top: 20rpx;background-color: white;">
			<uni-datetime-picker v-model="queryParams.daterange" type="daterange" rangeSeparator="至" :border="false"/>
		</view>
		
		
		<view v-if="feedbackList && feedbackList.length>0">
			<uni-card v-for="(item,index) in feedbackList" :key="item.id" :title="item.nickName" @click="toFlow(item.id)">
		
				<view class="card-content">
					<view class="card-item">
						<view>意见反馈：{{item.remark}}</view>
					</view>
					<view class="card-item">
						<view>回复：{{item.notes}}</view>
					</view>
					<view class="card-item">
						<view>反馈时间：</view>
						<view>{{parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
					</view>
					
				</view>
		
			</uni-card>
			<uni-load-more :status="moreStatus" />
		</view>
		<view v-else>
			<image style="width: 100%;" mode="aspectFit" src="/static/empty.png"></image>
		</view>
		<view style="height: 100rpx;"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'more',
				feedbackList:[],
				moreStatus: 'more',
				queryParams: {
					qUserId : undefined,
					daterange : undefined,
					qTimeStart : undefined,
					qTimeEnd : undefined,
					pageNum: 1,
					pageSize: 6,
				},
				total :0,
			}
		},
		watch: {
			'queryParams.daterange'(newval) {
				console.log(newval)
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 6
				this.feedbackList = []
				if(newval && newval.length == 2){
					this.queryParams.qTimeStart = newval[0]
					this.queryParams.qTimeEnd = newval[1]
				}else{
					this.queryParams.qTimeStart = undefined
					this.queryParams.qTimeEnd = undefined
				}
				
				this.getFeedbackList()
			},
		},
		onLoad(){
			this.getFeedbackList()
		},
		methods: {
			getFeedbackList() {
				let userId = this.$store.state.user.userInfo.userId
				this.queryParams.qUserId = userId
				
				this.moreStatus = 'loading'
				this.$http({
					url: '/userConfig/feedback/getFeedbackListByUser',
					method: 'post',
					data: this.queryParams
				}).then(res => {
					this.feedbackList = [...this.feedbackList, ...res.rows]
					this.total = res.total
					
					if(this.total <= this.queryParams.pageSize * this.queryParams.pageNum  && this.total >= this.queryParams.pageSize * (this.queryParams.pageNum -1)){
						this.moreStatus = 'noMore'
					}else{
						this.moreStatus = 'more'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.card-content {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;

	.card-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.card-item:nth-child(1) {
		width: 100%;
	}

	.card-item:nth-child(2) {
		width: 100%;
	}

	.card-item:nth-child(3) {
		width: 100%;
	}
}
.fixed-button{
  position: fixed;
  bottom: 100rpx;
  right: 0rpx;
  background-color: #1890ff;
  color: #e8f4ff;
  height: 70rpx;
  width: 130rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 50rpx 0 0 50rpx;
}
</style>
